<template>
  <div class="index-frame" v-if="!(tail && low)" v-loading="!(tail && low)" style="height: 100vh"></div>
  <div class="index" v-else>
      <SearchFilter :data="state" @changState="changState"/>
    <div class="main">
      <div class="main-left-m">
        <!-- 列表 -->
        <SearchList @pageChange="pageChange" :data="tail" />
      </div>
      <div class="main-right-m">
        <div>
          <SearchPop :data="tail" style="margin-bottom: 20px"/>
          <SearchCourse :data="tail" style="margin-bottom: 20px"/>
          <SearchSoftwareTopics :data="tail"/>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script setup>
import TopPicture from "@/components/TopPicture.vue";
import SearchFilter from "@/components/SearchFilter.vue";
import SearchCourse from "@/components/SearchCourse.vue";
import SearchSoftwareTopics from "@/components/SearchSoftwareTopics.vue";
import RecommendedGame from "@/components/RecommendedGame.vue";
import RecomAloneGame from "@/components/RecomAloneGame.vue";
import SearchPop from "@/components/SearchPop.vue";
import RecomMobileGame from "@/components/RecomMobileGame.vue";
import SearchList from "@/components/SearchList.vue";
import FriendLink from "@/components/FriendLink.vue";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
const route = ref(useRoute());
const tail = ref(null);
const low = ref(null);
const name = ref('');
const pageNum = ref('');
const state = ref('');
onMounted(()=>{
    name.value = route.value?.params?.name
    getDatas();
})
axios.get("/api/download/home/low").then(res => {
    low.value = res.data.data;
});
const pageNumber = ref(1);
const crumbVo = ref(0);
const curType = ref("pop");
/**
 * 获取列表
 */
const getDatas = () => {
    axios
        .get(
            "/api/download/common/search?name="+name.value+"&pageNum="+pageNumber.value+"&state="+state.value||'newest')
        .then(res => {
            tail.value = res.data.data;
        });
};
/**
 * 页码变化
 */
const pageChange = val => {
    pageNumber.value = val;
    getDatas();
};
/**
 * state变化
 */
const changState = val => {
    state.value = val;
    pageNumber.value = 1;
    getDatas();
};
</script>
  
  <style lang="less" scoped>
.index {
    min-height: 500px;
    .index-content {
        background: #fff;
    }
    .main {
        display: flex;
        justify-content: space-between;

        &-left {
            width: 25%;
        }

        &-left-m {
            width: 74.5%;
        }

        &-center {
            width: 49%;
        }

        &-center-m {
            width: 100%;
        }

        &-right {
            width: 25%;
        }

        &-right-m {
            width: 25%;
        }
    }
    .right-image {
        width: 100%;
        height: 305px;
        border-radius: 8px;
    }
}
</style>
  